.video-container {
  height     : 440px;
  width      : 100%;
  position   : relative;
  user-select: none;

  .video-box {
    height    : 100%;
    width     : 100%;
    background: #000;

    video {
      height: 100%;
      width : 100%;
    }

    &:hover~.video-controller {
      transform: translateZ(0);
      opacity  : 1;
    }
  }

  .video-controller {
    position  : absolute;
    left      : 0;
    bottom    : 0;
    width     : 100%;
    height    : 50px;
    background: rgba(0, 0, 0, .6);
    transition: all .3s;
    transform : translate3d(0, 30%, 0);
    opacity   : 0;

    &:hover {
      transform: translateZ(0);
      opacity  : 1;
    }

    .progress {
      width           : 100%;
      height          : 4px;
      background-color: rgba(51, 51, 51, .6);
      cursor          : pointer;
      position        : relative;
      z-index         : 2;

      .progress-now {
        display         : block;
        position        : absolute;
        top             : 0;
        left            : 0;
        right           : 0;
        bottom          : 0;
        height          : 4px;
        transform-origin: 0 0;
        transform       : scaleX(0);
        background-color: #ff6a03;
        z-index         : 2;
        // transition      : all .5s;

      }

      .progress-suc {
        position        : absolute;
        top             : 0;
        left            : 0;
        width           : 0%;
        height          : 4px;
        background-color: rgba(92, 92, 92, .6);
        z-index         : 1;
      }

      .progress-pie {
        position     : absolute;
        left         : 0%;
        top          : 50%;
        width        : 12px;
        height       : 12px;
        border-radius: 50%;
        transform    : translate3d(0, -50%, 0);
        z-index      : 8;
        background   : #fff;
        cursor       : pointer;
        // transition   : all .5s;

      }
    }

    .controller {
      position       : absolute;
      top            : 0;
      left           : 0;
      display        : flex;
      justify-content: space-between;
      align-items    : center;
      width          : 100%;
      height         : 50px;

      .controller-l,
      .controller-r {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        color          : #fff;
        height         : 100%;

        .iconfont {
          font-size: 20px;
          cursor   : pointer;
        }
      }

      .controller-l {
        padding-left: 30px;

        .controller-time {
          margin-left: 30px;
          font-size  : 14px;
        }
      }

      .controller-r {
        padding-right: 20px;

        .controller-video {
          display: flex;

          .videoProgress {
            margin-left     : 10px;
            margin-right    : 20px;
            position        : relative;
            width           : 100px;
            height          : 4px;
            margin-top      : 8px;
            border-radius   : 2px;
            background-color: #2c2c2c;
            cursor          : pointer;

            .videoProgress-now {
              width           : 20%;
              height          : 4px;
              background-color: #ff6a03;
              border-radius   : 2px 0 0 2px;

            }

            .videoProgress-pie {
              width        : 10px;
              height       : 10px;
              position     : absolute;
              left         : 10px;
              top          : -3px;
              border-radius: 50%;
              z-index      : 8;
              background   : #fff;
              cursor       : pointer;
            }
          }
        }
      }
    }
  }
}